<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 练习 -->
  <button>获取段子</button>
  <ul>

  </ul>
  <script>
    //get http://api.xiaohigh.com/duanzi
    //获取按钮
    let btn = document.querySelector('button');
    let ul = document.querySelector('ul');

    //绑定事件
    btn.onclick = function(){
      //发送 AJAX 请求
      let xhr = new XMLHttpRequest();
      xhr.responseType = 'json';
      //初始化
      xhr.open('get', 'http://api.xiaohigh.com/duanzi');
      //发送
      xhr.send();
      //
      xhr.onload = function(){
        //遍历响应体数据
        xhr.response.forEach(item => {
          //创建 li 元素
          let li = document.createElement('li');
          //设置 li 的文本
          li.innerHTML = item.text;
          //插入到 ul 中
          ul.append(li)
        })
      }
    }

  </script>
</body>
</html>